<template>
  <div id="cesiumContainer" ref="cesiumContainer"></div>
</template>

<script setup>
//引入cesium 引入样式 引入生命周期挂载
import * as Cesium from 'cesium';
import './Widgets/widgets.css';
import { onMounted } from 'vue';

//设置cesium token
Cesium.Ion.defaultAccessToken =
  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0MGNkNzY3YS1mMDcxLTQ0NjQtOTlhMC00Y2Y0MjA3ZGQ1ZTIiLCJpZCI6MjY0NzQyLCJpYXQiOjE3MzUwOTQ0NzF9.09AnFzH3aVpi7s-0WqcAYuf69lr4UUIbKL4DmKBf1qg';

//设置根目录静态资源 /代表根目录public
window.CESIUM_BASE_URL = '/';

onMounted(async () => {
  console.log('Cesium', Cesium);
  const viewer = new Cesium.Viewer('cesiumContainer', {
    // 是否显示信息窗口
    infoBox: false,
  });

  //动态设置默认颜色
  // let material = new Cesium.ColorMaterialProperty(
  //   new Cesium.Color(1.0, 1.0, 1.0, 1.0)
  // );
  // console.log('material', material);

  //动态设置官方示例的网格纹理
  let material = new Cesium.CheckerboardMaterialProperty({
    evenColor: Cesium.Color.RED,
    oddColor: Cesium.Color.GREEN,
    repeat: new Cesium.Cartesian2(4, 4),
  });

  //entity创建矩形
  var rectangle = viewer.entities.add({
    id: 'entityRect',
    //配置矩形
    rectangle: {
      //配置矩形的经纬度 两个点(西纬度和南纬度  东经度北纬度 两个点形成矩形)
      coordinates: Cesium.Rectangle.fromDegrees(
        //西边的经度
        90,
        //南边的纬度
        20,
        //东边的经度
        110,
        //北边的纬度
        30
      ),
      //设置实体材质属性MaterialProperty
      material: material,
    },
  });

  //primivite创建矩形
  //1.创建几何体
  let rectGeometry = new Cesium.RectangleGeometry({
    rectangle: Cesium.Rectangle.fromDegrees(
      //西边的经度
      115,
      //南边的纬度
      20,
      //东边的经度
      130,
      //北边的纬度
      30
    ),
    //挤出高度(距离表面高度)
    height: 30,
    //顶点格式(颜色 纹理 法线 反射光)  PerInstanceColorAppearance:颜色材质
    vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,
  });

  let rectGeometry1 = new Cesium.RectangleGeometry({
    rectangle: Cesium.Rectangle.fromDegrees(
      //西边的经度
      140,
      //南边的纬度
      20,
      //东边的经度
      160,
      //北边的纬度
      30
    ),
    //挤出高度(距离表面高度)
    height: 30,
    //顶点格式(颜色 纹理 法线 反射光)  PerInstanceColorAppearance:颜色材质
    vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,
  });

  //创建几何体实例
  let instance = new Cesium.GeometryInstance({
    id: 'redRect',
    geometry: rectGeometry,
    //目的 颜色属性
    attributes: {
      color: Cesium.ColorGeometryInstanceAttribute.fromColor(
        Cesium.Color.RED.withAlpha(0.5)
      ),
    },
  });

  let instance2 = new Cesium.GeometryInstance({
    id: 'blueRect',
    geometry: rectGeometry1,
    //目的 颜色属性
    attributes: {
      color: Cesium.ColorGeometryInstanceAttribute.fromColor(
        Cesium.Color.BLUE.withAlpha(0.5)
      ),
    },
  });

  //设置材质外观
  let appearance = new Cesium.PerInstanceColorAppearance({
    flat: true,
  });

  //创建图元
  let primivite = new Cesium.Primitive({
    geometryInstances: [instance, instance2],
    //材质
    appearance: appearance,
  });
  //添加到viewer场景中
  viewer.scene.primitives.add(primivite);

  //动态修改图元颜色
  setTimeout(() => {
    //1.给instance实体添加id
    let attribute = primivite.getGeometryInstanceAttributes('blueRect');
    attribute.color = Cesium.ColorGeometryInstanceAttribute.toValue(
      // Cesium.Color.YELLOW.withAlpha(0.5)
      //随机颜色值
      Cesium.Color.fromRandom({
        alpha: 0.5,
      })
    );
  }, 2000);

  //拾取
  //1.获取点击事件的实例
  let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
  //2.设置事件上执行的函数setInputAction 两个必填参数,操作函数action(setInputAction)和类型type(ScreenSpaceEventType)
  handler.setInputAction(function (movement) {
    //3.编写事件逻辑
    // console.log('movement', movement); //position:{x:...,y:...}
    //scene.pick选中物体
    var pickedObject = viewer.scene.pick(movement.position);
    console.log('pickedObject', pickedObject);
    //pickedObject:{id,primitive} id是挂载实体 primitive是地面图元 如果没有点击挂载的实体则为undefined
    //修改图元颜色
    if (Cesium.defined(pickedObject) && typeof pickedObject.id == 'string') {
      let attributes = primivite.getGeometryInstanceAttributes(pickedObject.id);
      attributes.color = Cesium.ColorGeometryInstanceAttribute.toValue(
        Cesium.Color.YELLOW.withAlpha(0.5)
      );
    }
  }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

  //设置相机位置
  viewer.camera.setView(viewer.entities);
});
</script>

<style>
/* 初始化边距 */
* {
  margin: 0;
  padding: 0;
}
/* 初始化模型和屏幕占位 */
#cesiumContainer {
  width: 100vw;
  height: 100vh;
}
</style>
